require('../../less/controls/bottom_popup_view.less');
var React = require('react');
var DOMUtil = require('../utils/DOMUtil');
module.exports = React.createClass({
	displayName:'BottomPopupView',
	getInitialState: function() {
		return {
			active: false
		};
	},
	componentDidMount: function (){
		var _dom = this.getDOMNode(),
			_popupDOM = this.refs.popup.getDOMNode();

		//console.log(_dom);
		//console.log('width: ', _dom.getBoundingClientRect().width);
		this._popupWidth = this.props.popupWidth || _dom.getBoundingClientRect().width;
		//_popupDOM.style.width = this._popupWidth + 'px';
		_popupDOM.style.position = this.props.popupPosition || 'absolute';
		this.__fixPosition(_dom, _popupDOM);
	},
	__fixPosition: function (target, popup){
		var _t = DOMUtil.getPosition(target), _ml = null;
		if((_t.x + this._popupWidth) > document.body.scrollWidth){
			_ml = _t.width - this._popupWidth;
		}
		if(_ml < 0){
			popup.style.marginLeft = _ml + 'px';
		}
	},
	__onClick: function (event){
		Popup.setBottomView(this);
		this.setState({
			active: !this.state.active
		});
		this.props.onClick && this.props.onClick(!this.state.active, this);
		event.stopPropagation();
		event.preventDefault();
	},
	active: function (active){
		this.setState({
			active: active
		});
	},
	__onPopClick: function (event){
		event.stopPropagation();
		event.preventDefault();
	},
	render:function(){
		return (
			<div className={"c-bottom-popup-view " + (this.props.status||'normal') + " " + (this.props.className||'') } data-active={this.state.active} style={this.props.style}>
				<div className="view" onClick={this.__onClick}>
					{this.props.render && this.props.render(this)}
				</div>
				<div ref="popup" className="popup" onClick={this.__onPopClick} style={this.props.popStyle} >{this.props.children}</div>
			</div>
		);
	}
});
